<template>
  <div>
    <div class="merchant">
      <img style="margin-left: 14px" class="avatar" :src="avatar" alt="" />
      <div class="bubbleSel bubbleSel-ing">
        <div v-if="item.type === 'image'">
          <img
            style="
              max-height: 200px;
              cursor: pointer;
              border-radius: 4px;
              max-width: 100%;
            "
            ref="img"
            :src="item.content"
          />
        </div>
        <div v-if="item.type === 'video'">
          <video style="max-height: 200px; max-width: 200px">
            <source :src="item.content" />
          </video>
          <div class="play-icon">
            <div name="play-circle-outline" size="40"></div>
          </div>
        </div>
        <div class="loader-bg"></div>
        <div class="loader"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from "vue";
import { type MessageItem } from "@/utils/socket";
const props = defineProps({
  avatar: {
    type: String,
    default: "",
  },
  item: {
    type: Object as () => MessageItem,
    default: () => {},
  },
});
</script>
<style>
.merchant {
  display: -webkit-flex;
  /* Safari */
  display: flex;
  width: 100%;
  margin: 20px 0;
  flex-wrap: wrap;
  align-items: flex-start;
  flex-direction: row-reverse;
}
.bubble,
.bubbleSel {
  padding: 10px;
  position: relative;
  background: #fff;
  border-radius: 6px;
  max-width: calc(100% - 110px);
  min-height: 41px;
}

.close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 999;
  color: #f2f2f2;
  height: 40px;
  background: #00000066;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding-right: 10px;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 20px;
}

.play-icon {
  cursor: pointer;
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  background: #00000033;
  top: 0;
  left: 0;
  color: #fff;
}

.bubbleSel-ing {
  width: 150px;
  text-align: center;
  padding: 0px;
  border-radius: 6px;
  overflow: hidden;
}

.loader-bg {
  position: absolute;
  z-index: 10;
  left: 0;
  bottom: 0;
  border-radius: 4px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.loader {
  z-index: 30;
  position: absolute;
  left: 35%;
  top: 35%;
  border: 4px solid rgba(0, 0, 0, 0.1);
  /* 轻颜色的边框 */
  border-radius: 50%;
  /* 圆形 */
  border-top: 4px solid #3498db;
  /* 蓝色边框 */
  width: 40px;
  /* 加载器的宽度 */
  height: 40px;
  /* 加载器的高度 */
  animation: spin 2s linear infinite;
  /* 应用加载动画 */
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>
